<template>
    <view class="container">
        <u-navbar
            title="藏品详情"
            :autoBack="true"
            leftIconSize="50rpx"
            :bgColor="'rgba(35,35,35, '+bgOpacity+')'"
            :titleStyle="{
                fontSize: '34rpx',
                fontWeight: 'bold',
                color: 'rgba(255, 255, 255, '+bgOpacity+')',
            }"
			height="100rpx"
            :leftIconColor="'rgba(255, 255, 255, '+bgOpacity+')'"
        >
        </u-navbar>
        <u-transition v-if="nftInfo != null" :show="nftInfo != null">
            <u-list
               :scrollIntoView="currentView"
               @scroll="scrollInfo"
            >
                <view class="nft-info">
                    <block v-if="nftInfo.showMode=='horizontal'">
                        <view class="mainImg-mc">
                            <image
                                :src="nftInfo.mainImg"
                                class="mainImg"
                                mode="widthFix"
                            ></image>
                        </view>
                        <view class="mainImg-shadow"></view>
                    </block>
                    <block v-if="nftInfo.showMode=='vertical'">
                        <view class="mainImg-vertical-mc">
                            <image
                                :src="nftInfo.mainImg"
                                class="vertical-mainImg"
                                mode="heightFix"
                            ></image>
                        </view>
                        <view class="mainImg-vertical-shadow"></view>
                    </block>
                    <block v-if="nftInfo.showMode=='symmetry'">
                        <view class="mainImg-symmetry-mc">
                            <image
                                    :src="nftInfo.mainImg"
                                    class="vertical-mainImg"
                                    mode="scaleToFill"
                            ></image>
                        </view>
                        <view class="mainImg-symmetry-shadow"></view>
                    </block>
                    <u-text
                        :text="nftInfo.name"
                        size="36rpx"
                        color="#ffffff"
                        lineHeight="50rpx"
                        align="center"
                        margin="0 0 36rpx 0"
                        :lines="1"
                    ></u-text>
                    <view class="nft-detail">
                        <view class="nft-stock">
                            <view class="nft-stock-name">发行量</view>
                            <view class="nft-stock-content">{{ nftInfo.nft.total }}</view>
                        </view>
                        <block v-if="nftInfo.ext && nftInfo.ext.hide == '1'">
                            <view class="nft-info-tag">不开售</view>
                            <view class="nft-info-tag">抽奖获得</view>
                        </block>
                        <block v-else>
                            <view class="nft-info-tag" v-if="nftInfo.ext">限购1份</view>
                            <view class="nft-info-tag">可挂售</view>
                        </block>
                    </view>
                    <nft-author v-if="nftInfo.author" :author="nftInfo.author"></nft-author>
                </view>
                <view class="bg">
                    <view class="grab" v-if="nftInfo.ext && nftInfo.ext.hide != 1">
                        <view class="grab-item">
                            <view class="grab-item-time">{{ nftInfo.ext.grabBeginAt|dateFormat }}</view>
                            <view class="grab-item-label">报名开启</view>
                        </view>
                        <view class="grab-item">
                            <view class="grab-item-time">{{ nftInfo.ext.grabEndAt|dateFormat }}</view>
                            <view class="grab-item-label">公布结果</view>
                        </view>
                        <view class="grab-item">
                            <view class="grab-item-time">{{ nftInfo.ext.grabPayAt|dateFormat }}</view>
                            <view class="grab-item-label">支付关闭</view>
                        </view>
                    </view>
                    <view class="h-20"></view>
                    <u-sticky
						:zIndex="1"
						bgColor="#232323"
						:customNavHeight="98+statusBarHeight"
					>
                        <u-tabs
                            :list="tabs"
                            lineColor="#FFFFFF"
                            lineWidth="69rpx"
                            lineHeight="4rpx"
                            activeStyle="font-size: 26rpx;color: #ffffff;line-height: 37rpx;"
                            inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
                            itemStyle="flex:1;height: 100rpx;border-bottom: 1px solid #2E2F30;"
                            :current="tabsCurrent"
							:scrollable="false"
                            @click="tabClick"
                        ></u-tabs>
                    </u-sticky>
                    <view id="detail" class="detail-item">
                        <view class="detail-title">···————「 藏品故事 」————···</view>
                        <view class="product-detail"><rich-text :nodes="nftInfo.detail"></rich-text></view>
                    </view>
                    <view class="border"></view>
                    <view id="block" class="detail-item">
                        <view class="detail-title">···————「 链上信息 」————···</view>
                        <block-item :nft="nftInfo.nft"></block-item>
                    </view>
                    <view class="border"></view>
                    <view class="extend">
                        <view class="extend-item" v-for="(item, k) in nftInfo.extendInfo" :key="k">
                            <view class="extend-title">···————「 {{ item.title }} 」————···</view>
                            <view class="extend-content">{{ item.content }}</view>
                        </view>
                    </view>
                </view>
                <view v-if="extState=='ing' || extState=='lotterying'" style="height: 134rpx"></view>
                <view v-else style="height: 100rpx"></view>
            </u-list>
            <view class="bottom">
                <nft-grab-card
                    :ext="nftInfo.ext"
                    v-if="extState=='ing' || extState=='lotterying'"
                ></nft-grab-card>
                <block v-if="userId">
                    <view class="nft-sell-info" v-if="nftInfo.ext && nftInfo.ext.hide == '1' ">
                        <u-text
                            :text="nftInfo.price"
                            size="40rpx"
                            bold
                            color="#FFFFFF"
                            lineHeight="47rpx"
                            prefixIcon="rmb"
                            iconStyle="font-size: 26rpx; color: #ffffff; top: 10rpx;"
                        ></u-text>
                        <view class="btn-buy">隐藏款</view>
                    </view>
                    <view class="nft-sell-info" v-else>
                        <u-text
                            :text="nftInfo.price"
                            size="40rpx"
                            bold
                            color="#FFFFFF"
                            lineHeight="47rpx"
                            prefixIcon="rmb"
                            iconStyle="font-size: 26rpx; color: #ffffff; top: 10rpx;"
                        ></u-text>
                        <block v-if="extState == 'wait'">
                            <nft-info-btn :grabBeginTime="nftInfo.ext.grab_begin_time"></nft-info-btn>
                            <!--view class="btn-buy">等待开售 {{ nftInfo.ext.grabBeginAt }}</view-->
                        </block>
                        <block v-if="extState === 'ing'">
                            <view class="nft-sell-first" @click="firstOrder" v-if="userTicket">优先购 x {{ userTicket }}</view>
                            <view class="nft-sell-tips" v-else>未中签将退回金豆</view>
                            <view class="grab-btn">
                                <view class="grab-point">
                                    <view class="grab-point-num">{{ nftInfo.ext.grabPoint? nftInfo.ext.grabPoint:0 }}</view>
                                    <view class="grab-point-until">金豆</view>
                                </view>
                                <view class="grab-border">｜</view>
                                <view class="grab-btn-name" @click="onsubmit">报名抽签</view>
                            </view>
                        </block>
                        <block v-if="extState === 'lotterying'">
                            <view class="nft-sell-first" @click="firstOrder" v-if="userTicket">优先购 x {{ userTicket }}</view>
                            <view class="btn-buy">等待抽签</view>
                        </block>
                        <block v-if="extState == 'complete'">
                            <view class="btn-buy">已售罄</view>
                        </block>
                    </view>
                </block>
                <view class="nft-sell-info" v-else>
                    <u-text
                        :text="nftInfo.price"
                        size="40rpx"
                        bold
                        color="#FFFFFF"
                        lineHeight="47rpx"
                        prefixIcon="rmb"
                        iconStyle="font-size: 26rpx; color: #ffffff; top: 10rpx;"
                    ></u-text>
                    <view class="btn-buy" @click="$u.route('pages/login/index')">去登录</view>
                </view>
            </view>
            <u-popup
                :show="popupShow"
                mode="center"
                :customStyle="{
                    width: '580rpx',
                    background: '#FFFFFF',
                    boxShadow: '0px 0px 13rpx 0px #999999',
                    borderRadius: '18rpx',
                    overflow: 'hidden'
                }"
            >
                <popup-context
                    v-if="popupShow"
                    @cancel="closePopup"
                    :extData="extData"
                    :p_type="popupType"
                    @confirm="handleConfirm"
                ></popup-context>
            </u-popup>
        </u-transition>
    </view>
</template>

<script>
    import NftAuthor from "@/components/NftAuthor"
    import BlockItem from "@/components/BlockItem"
    import NftGrabCard from "@/components/NftGrabCard"
    import PopupContext from "@/components/PopupContext"
    import NftInfoBtn from "@/components/NftInfoBtn"
    import { getNftInfoData } from "@/config/api"
    import { createGrabOrder, pvProduct } from "@/config/api-java"
    import { parseTime } from "@/untils/index"
    export default {
        name: "index",
        components: {
            NftAuthor,
            BlockItem,
            NftGrabCard,
            PopupContext,
            NftInfoBtn
        },
        data() {
            return {
                tabs: [
                    {
                        name: "作品介绍",
                        value: "detail"
                    },
                    {
                        name: "链上信息",
                        value: "block"
                    }
                ],
                currentView: null,
                tabsIndex: 0,
                popupShow: false,
                popupType: "first",
                nftInfo: null,
                userTicket: null,
                extData: {},
                grabInfo: null,
                scrollTop: 0,
                blockTopHeight: 0,
                statusBarHeight: 0,
                productId: null
            }
        },
        filters: {
            dateFormat(val) {
                return parseTime(val, "{m}.{d} {h}:{i}")
            }
        },
        onLoad(option) {
            const res = uni.getSystemInfoSync()
            this.statusBarHeight = res.statusBarHeight/(uni.upx2px(100)/100)
            this.productId = option.productId
            pvProduct(this.productId)
        },
        onShow(){
            this.getData(this.productId)
        },
        computed: {
            extState() {
                var ext = this.nftInfo.ext
                if (ext) {
                    if (ext.openState === "ing" && this.grabInfo) {
                        return "lotterying"
                    }
                    return ext.openState
                } else {
                    return "normal"
                }
            },
            bgOpacity() {
                if(this.scrollTop === 0) {
                    return 0
                } else if (this.scrollTop < 414) {
                    var opacity = Math.floor(this.scrollTop/750 * 10) / 10
                    return  opacity
                } else {
                    return 1
                }
            },
            tabsCurrent() {
                if (this.blockTopHeight===0 && this.scrollTop >　200) {
                    this.getTopHeight()
                }
                if (this.scrollTop > this.blockTopHeight-400) {
                    return 1
                } else {
                    return 0
                }
            },
            userId() {
                return this.$store.getters.userId
            }
        },
        methods: {
            scrollInfo(e) {
                this.scrollTop = e
                //1685
                //console.log(e)
            },
            tabClick(item) {
                this.currentView = item.value
            },
            async getData(id) {
                const res = await getNftInfoData({id, userId: this.$store.getters.userId})
                this.nftInfo = res.nftInfo
                this.userTicket = res.userTicket
                this.grabInfo = res.grabInfo
                if (!this.nftInfo.ext || !this.grabInfo) {
                    return
                }
                if (this.grabInfo.state === 'win') {
                    this.popupType = "lottery"
                    this.popupShow = true
                    this.extData = {
                        grabPayAt: this.nftInfo.ext.grabPayAt
                    }
                }
            },
            async onsubmit() {
                if (!this.$store.getters.identify) {
                    this.popupType = "real"
                    this.popupShow = true
                    return
                }
                if (this.nftInfo.ext.grabPoint && this.$store.getters.userPoint < this.nftInfo.ext.grabPoint) {
                    this.popupType = "fail"
                    this.popupShow = true
                    return
                }
                const res = await createGrabOrder({productId: this.nftInfo.id})
                this.popupType = "grab"
                this.extData = {
                    grabEndAt: this.nftInfo.ext.grabEndAt
                }
                this.popupShow = true
                this.grabInfo = {
                    id: res
                }
            },
            async closePopup() {
                this.popupShow = false
                if (this.popupType === "first") {
                    uni.showLoading()
                    const res = await createGrabOrder({productId: this.nftInfo.id})
                    this.popupType = "grab"
                    this.extData = {
                        grabEndAt: this.nftInfo.ext.grabEndAt
                    }
                    this.grabInfo = {
                        id: res
                    }
                    this.popupShow = true
                    uni.hideLoading()
                }
            },
            handleConfirm() {
                if (this.popupType === "first") {
                    /*this.$u.route({
                        url: "pages_v2/nftConfirm/index",
                        params: {
                            productId: this.nftInfo.id,
                            type: "priority",
                            priorityTicketId: this.userTicket.id
                        }
                    })*/
                    this.firstOrder()
                }
                if (this.popupType === "lottery") {
                    this.$u.route({
                        url: "pages_v2/nftConfirm/index",
                        params: {
                            id: this.grabInfo.id,
                            type: "grab"
                        }
                    })
                }
                if (this.popupType === "real") {
                    this.popupShow = false
                    this.$u.route("pages/identify/index")
                }
            },
            getTopHeight() {
                var than = this
                const query = uni.createSelectorQuery().in(this);
                query.select('#block').boundingClientRect(data => {
                    //console.log(data)
                    //console.log("节点离页面顶部的距离为" + data.top);
                    than.blockTopHeight = data.top
                    //console.log("得到布局位置信息" + JSON.stringify(data));
                }).exec();
            },
            firstOrder() {
                this.$u.route({
                    url: "pages_v2/nftConfirm/index",
                    params: {
                        productId: this.nftInfo.id,
                        type: "priority",
                        orderType: "first"
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .nft-info {
            box-sizing: border-box;
            width: 100%;
            background: url("/static/nft_bg.png") no-repeat;
            background-size: 100% 100%;
            padding-top: calc(var(--status-bar-height) + 164rpx);
            padding-left: 26rpx;
            padding-right: 30rpx;
            padding-bottom: 38rpx;
            text-align: center;
            .mainImg{
                display: block;
                width: 606rpx;
                border-radius: 20rpx;
            }
            .mainImg-mc {
                display: flex;
                align-content: center;
                justify-content: center;
                background: url("/static/nft_mc_default.png") no-repeat;
                background-size: 100% 100%;
                width: 630rpx;
                padding: 20rpx 12rpx;
                margin: auto;
            }
            .mainImg-shadow {
                background: url("/static/nft_shadow_default.png") no-repeat;
                background-size: 100% 100%;
                width: 606rpx;
                height: 84rpx;
                margin: 10rpx auto 27rpx auto;
            }
            .vertical-mainImg {
                display: block;
                width: 100%;
                height: 100%;
                margin: 0 auto;
                border-radius: 20rpx;
            }
            .mainImg-vertical-mc {
                box-sizing: border-box;
                display: inline-block;
                //width: 380rpx;
                height: 694rpx;
                background: url("/static/nft_mc_vertical.png") no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                padding: 16rpx;
            }
            .mainImg-vertical-shadow {
                background: url("/static/nft_shadow_vertical.png") no-repeat;
                background-size: 100% 100%;
                width: 372rpx;
                height: 84rpx;
                margin: 10rpx auto 27rpx auto;
            }

            .mainImg-symmetry-mc {
                box-sizing: border-box;
                display: inline-block;
                width: 534rpx;
                height: 534rpx;
                background: url("/static/nft_mc_symmetry.png") no-repeat;
                background-size: 100% 100%;
                margin: 0 auto;
                padding: 20rpx;
            }
            .mainImg-symmetry-shadow {
                background: url("/static/nft_shadow_symmetry.png") no-repeat;
                background-size: 100% 100%;
                width: 576rpx;
                height: 84rpx;
                margin: 8rpx auto 6rpx auto;
            }
        }
        .bg {
            background: #232323;
            padding-bottom: 100rpx;
			margin-top: -2px;
            .grab {
                padding: 0 30rpx 0 26rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 14rpx;

                .grab-item {
                    box-sizing: border-box;
                    width: 212rpx;
                    height: 92rpx;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    border-radius: 4rpx;
                    border: 1rpx solid #797979;
                    text-align: center;
                    padding-top: 11rpx;

                    .grab-item-time {
                        margin-bottom: 5rpx;
                    }
                }
            }

            .h-20 {
                height: 20rpx;
            }
        }
        .detail-item {
            margin-top: 50rpx;
            .detail-title {
                text-align: center;
                color: #ffffff;
                margin-bottom: 47rpx;
            }
        }
        .extend {
            padding: 0 25rpx;
            .extend-item {
                .extend-title {
                    //font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    margin-bottom: 38rpx;
                }
                .extend-content {
                    font-size: 26rpx;
                    font-family: PingFang-SC-Light, PingFang-SC;
                    font-weight: 300;
                    color: #FFFFFF;
                    text-indent: 1.5em;
                }
            }
        }
        .border {
            width: 100%;
            height: 1px;
            background: #2E2F30;
            margin: 60rpx 0;
        }
        .bottom {
            position: fixed;
            bottom: 0;
            width: 100%;
            z-index: 999;
            box-sizing: border-box;
            //height: 100rpx;
            //padding-left: 28rpx;
            //padding-right: 25rpx;
            .nft-sell-info {
                background: #000000;
                display: flex;
                align-items: center;
                height: 100rpx;
                padding-left: 28rpx;
                padding-right: 25rpx;
                .btn-buy {
                    width: 328rpx;
                    height: 70rpx;
                    background: #454545;
                    border-radius: 36rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 70rpx;
                }
            }
            .nft-sell-tips {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #B6B6B6;
                line-height: 1.5;
                margin-right: 24rpx;
            }
            .nft-sell-first {
                /*background: url("https://img.ionepin.com/4645d58dce5148583a18c937644feeac8ac8fdde.png") no-repeat;
                background-size: 100% 100%;
                width: 150rpx;
                height: 40rpx;
                margin-right: 20rpx;*/
                min-width: 200rpx;
                height: 70rpx;
                background: linear-gradient(180deg, #FFD39D 0%, #FFA764 100%);
                border-radius: 35rpx;
                line-height: 70rpx;
                text-align: center;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-right: 20rpx;
            }
            .grab-btn {
                height: 70rpx;
                background: linear-gradient(219deg, #7561FF 0%, #64A2FF 100%);
                border-radius: 36rpx;
                display: flex;
                color: #FFFFFF;
                padding: 0 38rpx;
                align-items: center;
                .grab-point {
                    display: flex;
                    align-items: flex-end;
                    .grab-point-num {
                        font-size: 32rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                    }
                    .grab-point-until {
                        margin-left: 4rpx;
                        font-size: 24rpx;
                    }
                }
                .grab-border {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }
                .grab-btn-name {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                }
            }
        }
        .nft-detail {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            margin-bottom: 40rpx;
            .nft-stock {
                box-sizing: border-box;
                display: flex;
                border-radius: 18rpx;
                border: 1px solid #5065DF;
                height: 36rpx;
                overflow: hidden;
                margin-left: 16rpx;
                .nft-stock-name {
                    box-sizing: border-box;
                    background: #5065DF;
                    padding: 0 11rpx;
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    //line-height: 36rpx;
                    height: 36rpx;
                }
                .nft-stock-content {
                    box-sizing: border-box;
                    font-size: 22rpx;
                    font-family: PingFang-SC-Bold, PingFang-SC;
                    font-weight: bold;
                    color: #AAB7FF;
                    //line-height: 36rpx;
                    text-align: center;
                    padding-left: 9rpx;
                    padding-right: 12rpx;
                    height: 36rpx;
                }
            }
            .nft-info-tag {
                box-sizing: border-box;
                margin-left: 16rpx;
                height: 36rpx;
                background: #5065DF;
                border-radius: 18rpx;
                font-size: 22rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                padding: 3rpx 12rpx;
            }
        }
    }
</style>
